<template>
  <div class="app" v-loading="isLoading" @click="closeBox">
    <div class="online" @click.stop="getOnlineList()">
      <span class="iconfont icon-icon_meeting_fill"></span>
      {{ onlineList.length }}
    </div>
    <template v-if="!isLoading">
      <div class="message-list">
        <div class="message-box" id="message_box">
          <template v-for="item in messageList" :key="item.id">
            <template v-if="item.type == 'text'">
              <div
                class="message-item"
                :class="
                  item.from.user_id == userInfo.user_id ? 'message-mine' : ''
                "
              >
                <div class="message-head">
                  <el-dropdown trigger="click" @command="userHeadCommand">
                    <img
                      :src="item.from.user_head"
                      @error="item.from.user_head = noHeadImage"
                    />
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          :command="beforeHandleUserCommand(item.from, 'chat')"
                          >发起私聊</el-dropdown-item
                        >
                        <el-dropdown-item
                          :command="
                            beforeHandleUserCommand(item.from, 'profile')
                          "
                          >查看主页</el-dropdown-item
                        >
                        <el-dropdown-item
                          :command="beforeHandleUserCommand(item.from, 'at')"
                          >@一下Ta</el-dropdown-item
                        >
                        <template
                          v-if="
                            !item.from.room_admin &&
                            item.from.user_id !== userInfo.user_id
                          "
                        >
                          <!--对方不是房主-->
                          <template
                            v-if="
                              (userInfo.room_admin ||
                                userInfo.role_type === 1 ||
                                userInfo.role_type === 2) &&
                              !item.from.room_admin &&
                              (!item.from.role_type ||
                                userInfo.role_type < item.from.role_type)
                            "
                          >
                            <!--自己是房主 或者 自己是副房主或者房管且对方无权限或自己权限大于对方-->
                            <el-dropdown-item class="line"></el-dropdown-item>
                            <el-dropdown-item
                              :command="
                                beforeHandleUserCommand(
                                  item.from,
                                  'song_disabled'
                                )
                              "
                              >禁止点歌</el-dropdown-item
                            >
                            <el-dropdown-item
                              :command="
                                beforeHandleUserCommand(
                                  item.from,
                                  'message_disabled'
                                )
                              "
                              >禁止发言</el-dropdown-item
                            >
                            <el-dropdown-item
                              :command="
                                beforeHandleUserCommand(
                                  item.from,
                                  'clear_disabled'
                                )
                              "
                              >解除限制</el-dropdown-item
                            >
                            <el-dropdown-item class="line"></el-dropdown-item>
                            <el-dropdown-item
                              :command="
                                beforeHandleUserCommand(item.from, 'set_vp')
                              "
                              v-if="
                                item.from.role_type !== 1 && userInfo.room_admin
                              "
                              >设置为副房主</el-dropdown-item
                            >
                            <el-dropdown-item
                              :command="
                                beforeHandleUserCommand(item.from, 'set_admin')
                              "
                              v-if="
                                item.from.role_type !== 2 &&
                                (userInfo.room_admin ||
                                  (userInfo.role_type &&
                                    userInfo.role_type < 2))
                              "
                              >设置为房管</el-dropdown-item
                            >
                            <el-dropdown-item
                              :command="
                                beforeHandleUserCommand(item.from, 'set_vip')
                              "
                              v-if="item.from.role_type !== 3"
                              >设置为嘉宾</el-dropdown-item
                            >
                            <el-dropdown-item
                              :command="
                                beforeHandleUserCommand(item.from, 'set_normal')
                              "
                              v-if="item.from.role_type !== false"
                              >设置为普通用户</el-dropdown-item
                            >
                          </template>
                        </template>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <div class="message-content">
                  <div class="message-name">
                    <template v-if="item.from.room_admin">
                      <div class="message-role message-role-owner" title="房主">
                        <i class="iconfont icon-icon_people_fill"></i>
                      </div>
                    </template>
                    <template v-else>
                      <div
                        class="message-role message-role-vp"
                        title="副房主"
                        v-if="item.from.role_type == 1"
                      >
                        <i class="iconfont icon-icon_people_fill"></i>
                      </div>
                      <div
                        class="message-role message-role-admin"
                        title="房管"
                        v-if="item.from.role_type == 2"
                      >
                        <i class="iconfont icon-icon_people_fill"></i>
                      </div>
                      <div
                        class="message-role message-role-vip"
                        title="嘉宾"
                        v-if="item.from.role_type == 3"
                      >
                        <i class="iconfont icon-icon_people_fill"></i>
                      </div>
                    </template>
                    {{ item.from.user_name }}
                  </div>
                  <div
                    class="message-text"
                    :class="
                      userInfo.user_sex == 1 ? 'message-boy' : 'message-girl'
                    "
                  >
                    {{ item.msg }}
                  </div>
                </div>
              </div>
            </template>
            <template v-if="item.type == 'addSong'">
              <div class="system addSong">
                <div class="msg">
                  <span class="user" @click="userProfile(item.from.userid)">{{
                    item.from.user_name
                  }}</span>
                  点了一首
                  <span class="song">{{ item.song.name }}</span>
                </div>
              </div>
            </template>
            <template v-if="item.type === 'passSong'">
              <div class="system passSong">
                <div class="msg">
                  <span class="user" @click="userProfile(item.from.userid)">{{
                    item.from.user_name
                  }}</span>
                  切掉了
                  <span class="song">{{ item.song.name }}</span>
                </div>
              </div>
            </template>
            <template v-if="item.type === 'removeSong'">
              <div class="system removeSong">
                <div class="msg">
                  <span class="user" @click="userProfile(item.from.userid)">{{
                    item.from.user_name
                  }}</span>
                  移除了
                  <span class="song">{{ item.song.name }}</span>
                </div>
              </div>
            </template>
            <template v-if="item.type === 'pushSong'">
              <div class="system pushSong">
                <div class="msg">
                  <span class="user" @click="userProfile(item.from.userid)">{{
                    item.from.user_name
                  }}</span>
                  将
                  <span class="song">{{ item.song.name }}</span> 设置为置顶
                </div>
              </div>
            </template>
            <template v-if="item.type === 'setDisabled'">
              <div class="system setDisabled">
                <div class="msg">
                  <template v-if="item.disbaled == 'message_disabled'">
                    <span class="user" @click="userProfile(item.from.userid)">{{
                      item.from.user_name
                    }}</span>
                    禁止了
                    <span class="user" @click="userProfile(item.user.userid)">{{
                      item.user.user_name
                    }}</span>
                    发言
                  </template>
                  <template v-if="item.disbaled == 'song_disabled'">
                    <span class="user" @click="userProfile(item.from.userid)">{{
                      item.from.user_name
                    }}</span>
                    禁止了
                    <span class="user" @click="userProfile(item.user.userid)">{{
                      item.user.user_name
                    }}</span>
                    点歌
                  </template>
                  <template v-if="item.disbaled == 'clear_disabled'">
                    <span class="user" @click="userProfile(item.from.userid)">{{
                      item.from.user_name
                    }}</span>
                    解除了对
                    <span class="user" @click="userProfile(item.user.userid)">{{
                      item.user.user_name
                    }}</span>
                    的所有限制
                  </template>
                </div>
              </div>
            </template>
            <template v-if="item.type === 'setRole'">
              <div class="system setRole">
                <div class="msg">
                  <span class="user" @click="userProfile(item.from.userid)">{{
                    item.from.user_name
                  }}</span>
                  将用户
                  <span class="user" @click="userProfile(item.user.userid)">{{
                    item.user.user_name
                  }}</span>
                  设置为
                  {{ item.role }}
                </div>
              </div>
            </template>
          </template>
        </div>
        <div class="controll">
          <div class="item" @click="openSearchSong">
            <i class="iconfont icon-icon_search"></i>
            搜索点歌
          </div>
          <div class="item" @click="openSongList">
            <i
              class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-18"
            ></i>
            已点歌曲
          </div>
          <div class="item" @click="passSong">
            <i class="iconfont icon-xiayige"></i>
            切掉当前
          </div>
        </div>
      </div>
      <div class="message-form">
        <textarea :placeholder="placeholder" v-model="message" @keydown="messageKeyDown"></textarea>
        <el-button
          class="btn-comment"
          type="success"
          size="mini"
          plain
          @click="sendMessage"
          >发送</el-button
        >
        <div class="at-box" v-if="atUserInfo">
          <div class="at-content">
            @{{ atUserInfo.user_name }}
            <template v-if="atUserInfo.content"
              >: {{ atUserInfo.content }}</template
            >
          </div>
          <i class="iconfont icon-guanbi1" @click="atUserInfo = false"></i>
        </div>
      </div>
    </template>
    <!-- 盒子 浏览器 -->
    <div class="online-box" v-show="onlineBox" @click.stop>
      <div class="list">
        <div class="user-list">
          <template v-for="item in onlineUserList" :key="item.room_id">
            <!-- <div>管</div> -->
            <div class="user-detail">
              <el-dropdown trigger="click" @command="userHeadCommand">
                <img
                  class="user-head"
                  :src="item.user_head"
                  @error="item.user_head = noHeadImage"
                />

                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      :command="beforeHandleUserCommand(item, 'chat')"
                      >发起私聊</el-dropdown-item
                    >
                    <el-dropdown-item
                      :command="beforeHandleUserCommand(item, 'profile')"
                      >查看主页</el-dropdown-item
                    >
                    <el-dropdown-item
                      :command="beforeHandleUserCommand(item, 'at')"
                      >@一下Ta</el-dropdown-item
                    >
                    <template
                      v-if="
                        !item.room_admin && item.user_id !== userInfo.user_id
                      "
                    >
                      <!--对方不是房主-->
                      <template
                        v-if="
                          (userInfo.room_admin ||
                            userInfo.role_type === 1 ||
                            userInfo.role_type === 2) &&
                          !item.room_admin &&
                          (!item.role_type ||
                            userInfo.role_type < item.role_type)
                        "
                      >
                        <!--自己是房主 或者 自己是副房主或者房管且对方无权限或自己权限大于对方-->
                        <el-dropdown-item class="line"></el-dropdown-item>
                        <el-dropdown-item
                          :command="
                            beforeHandleUserCommand(item, 'song_disabled')
                          "
                          >禁止点歌</el-dropdown-item
                        >
                        <el-dropdown-item
                          :command="
                            beforeHandleUserCommand(item, 'message_disabled')
                          "
                          >禁止发言</el-dropdown-item
                        >
                        <el-dropdown-item
                          :command="
                            beforeHandleUserCommand(item, 'clear_disabled')
                          "
                          >解除限制</el-dropdown-item
                        >
                        <el-dropdown-item class="line"></el-dropdown-item>
                        <el-dropdown-item
                          :command="beforeHandleUserCommand(item, 'set_vp')"
                          v-if="item.role_type !== 1 && userInfo.room_admin"
                          >设置为副房主</el-dropdown-item
                        >
                        <el-dropdown-item
                          :command="beforeHandleUserCommand(item, 'set_admin')"
                          v-if="
                            item.role_type !== 2 &&
                            (userInfo.room_admin ||
                              (userInfo.role_type && userInfo.role_type < 2))
                          "
                          >设置为房管</el-dropdown-item
                        >
                        <el-dropdown-item
                          :command="beforeHandleUserCommand(item, 'set_vip')"
                          v-if="item.role_type !== 3"
                          >设置为嘉宾</el-dropdown-item
                        >
                        <el-dropdown-item
                          :command="beforeHandleUserCommand(item, 'set_normal')"
                          v-if="item.role_type !== false"
                          >设置为普通用户</el-dropdown-item
                        >
                      </template>
                    </template>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <div class="user-info">
                <span class="user-name">
                  <template v-if="item.room_admin">
                    <div class="message-role message-role-owner" title="房主">
                      <i class="iconfont icon-icon_people_fill"></i>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      class="message-role message-role-vp"
                      title="副房主"
                      v-if="item.role_type == 1"
                    >
                      <i class="iconfont icon-icon_people_fill"></i>
                    </div>
                    <div
                      class="message-role message-role-admin"
                      title="房管"
                      v-if="item.role_type == 2"
                    >
                      <i class="iconfont icon-icon_people_fill"></i>
                    </div>
                    <div
                      class="message-role message-role-vip"
                      title="嘉宾"
                      v-if="item.role_type == 3"
                    >
                      <i class="iconfont icon-icon_people_fill"></i>
                    </div> </template
                  >{{ item.user_name }}</span
                >
                <div class="user-remark">
                  {{ item.user_remark }}
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      room: false,
      noHeadImage: require("@/asset/img/head.jpg"),
      isLoading: false,
      onlineList: [],
      placeholder: "说点什么吧...",
      message: "",
      messageList: [],
      userInfo: false,
      lock: false,
      onlineBox: false,
      onlineUserList: [],
      atUserInfo: false,
    };
  },
  watch: {
    "$store.state.nowApp.data.room_id"() {
      if (
        this.$store.state.nowApp.key === "room_main" &&
        this.$store.state.nowApp.data.room_id !== this.room.room_id
      ) {
        this.room = JSON.parse(JSON.stringify(this.$store.state.nowApp.data));
        this.joinRoom();
      }
    },
    "$store.state.messageList": {
      handler(messageList) {
        messageList = messageList.filter((item) => {
          return item.type == "room" && item.room == this.room.room_id;
        });
        this.messageList = JSON.parse(
          JSON.stringify(
            messageList.map((item) => {
              return item.message;
            })
          )
        );
        this.autoScroll();
      },
      immediate: true,
      deep: true,
    },
    "$store.state.onlineList": {
      handler(onlineList) {
        this.onlineList = onlineList;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.room = JSON.parse(JSON.stringify(this.$store.state.nowApp.data));
    this.joinRoom();
    this.getUserRoleInfo();
  },
  methods: {
    getUserRoleInfo() {
      this.isLoading = true;
      let userInfo = localStorage.getItem("user");
      if (!userInfo) {
        this.$message.error("用户身份初始化失败");
        let app = this.tool.getAppByKey("room_main");
        app.hideWhenClose = false;
        this.$store.commit("closeApp", app);
        return;
      }
      userInfo = JSON.parse(userInfo);
      this.request({
        url: "room/getMyRole",
        method: "POST",
        data: {
          room_id: this.room.room_id,
        },
        success: (res) => {
          userInfo.role_type = res.data.role_type;
          userInfo.room_admin = res.data.room_admin;
          this.userInfo = userInfo;
        },
        error: (res) => {
          this.$message.error(res.msg);
          let app = this.tool.getAppByKey("room_main");
          app.hideWhenClose = false;
          this.$store.commit("closeApp", app);
        },
        final: () => {
          this.isLoading = false;
        },
      });
    },
    closeBox() {
      this.onlineBox = false;
    },
    beforeHandleUserCommand(item, cmd) {
      return {
        item: item,
        cmd: cmd,
      };
    },
    userHeadCommand(cmd) {
      console.log(cmd);
      switch (cmd.cmd) {
        case "set_vp":
        case "set_admin":
        case "set_vip":
        case "set_normal":
          this.setUserRole(cmd.item, cmd.cmd);
          break;
        case "clear_disabled":
        case "message_disabled":
        case "song_disabled":
          this.setDisabled(cmd.item, cmd.cmd);
          break;
        case "at":
          this.atUserInfo = cmd.item;
          break;
        case "profile":
          this.$emit("api", {
            event: "openApp",
            app: "user_profile",
            data: cmd.item.user_id,
          });
          break;
        case "chat":
          this.$emit("api", {
            event: "openApp",
            app: "chat_recent",
            data: cmd.item.user_id,
          });
          break;
        default:
      }
    },
    /**
     * 用户主页
     */
    userProfile(userid) {
      this.$emit("api", {
        event: "openApp",
        app: "user_profile",
        data: userid,
      });
    },
    setUserRole(user, type) {
      this.request({
        url: "room/setRole",
        method: "POST",
        data: {
          room_id: this.room.room_id,
          user_id: user.user_id,
          type: type,
        },
        success: (res) => {
          this.$message.success(res.msg);
          this.getOnlineList();
          return false;
        },
      });
    },
    setDisabled(user, type) {
      this.request({
        url: "room/setDisabled",
        method: "POST",
        data: {
          room_id: this.room.room_id,
          user_id: user.user_id,
          type: type,
        },
        success: (res) => {
          this.$message.success(res.msg);
          this.getOnlineList();
        },
      });
    },
    openSearchSong() {
      this.$store.commit("openAppByKey", "song_search");
    },
    openSongList() {
      this.$store.commit("openAppByKey", "room_song");
    },
    autoScroll() {
      if (!this.lock) {
        this.$nextTick(() => {
          let ele = document.getElementById("message_box");
          ele.scrollTop = ele.scrollHeight;
        });
      }
    },
    /**
     * 获取在线列表
     */
    getOnlineList() {
      this.onlineBox = true;
      this.request({
        url: "room/online",
        method: "POST",
        data: {
          room_id: this.room.room_id,
        },
        success: (res) => {
          this.onlineUserList = res.data;
        },
      });
    },
    /**
     * 加载本地消息记录
     */
    getLocalMessageList() {
      this.messageList = [];
      this.autoScroll();
    },
    /**
     * 进入房间
     */
    joinRoom() {
      this.isLoading = true;
      this.$emit("api", {
        event: "setWindowTitle",
        title: "正在进入,请稍候...",
      });
      this.request({
        url: "room/join",
        method: "POST",
        data: {
          room_id: this.room.room_id,
        },
        success: (res) => {
          this.$store.commit("updateRoom", this.room);
          this.$emit("api", {
            event: "sendWssMessage",
            data: res.data.key,
          });
          this.$emit("api", {
            event: "setWindowTitle",
            title: this.room.room_name + "(" + this.room.room_id + ")",
          });
          this.getLocalMessageList();
        },
        error: () => {
          let app = this.tool.getAppByKey("room_main");
          app.hideWhenClose = false;
          this.$store.commit("closeApp", app);
        },
        final: () => {
          this.isLoading = false;
        },
      });
    },
    /**
     * 输入框键盘按下事件
     */
    messageKeyDown(e) {
      // console.log(e.ctrlKey, e.key);
      switch (e.key) {
        case "Enter":
          e.preventDefault();
          this.sendMessage(this.message);
          break;
      }
    },
    /**
     * 发送消息
     */
    sendMessage() {
      if (!this.message) {
        return;
      }
      let sendData = {
        room_id: this.room.room_id,
        type: "text",
        msg: this.message,
        at: {
          user_id: this.atUserInfo.user_id,
          user_name: this.atUserInfo.user_name,
          content: this.atUserInfo.content || false,
        },
      };
      this.message = "";
      this.request({
        url: "room/send",
        method: "POST",
        data: sendData,
        success: () => {
          this.atUserInfo = false;
        },
        error: () => {},
      });
    },
    /**
     * 切歌
     */
    passSong() {
      this.request({
        url: "room/passSong",
        method: "POST",
        data: {
          room_id: this.room.room_id,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.app {
  display: flex;
  flex: 1;
  width: 100%;
  color: #333;
  text-shadow: none;
  flex-direction: column;
  .online {
    position: absolute;
    right: 15px;
    top: 13px;
    color: yellow;
    font-size: 14px;
    cursor: pointer;
  }
  .icon-xingbie-nv {
    color: #f288a4;
  }
  .icon-xingbie-nan {
    color: #759fd1;
  }
  .online-box {
    height: 95%;
    position: absolute;
    right: 0px;
    top: 40px;
    width: 300px;
    bottom: 0px;
    overflow: hidden;
    overflow-y: auto;
    box-shadow: 0 0 20px rgb(0 0 0 / 30%);
    overflow: hidden;
    .list {
      overflow: auto;
      height: 100%;
      width: 100%;
      backdrop-filter: blur(20px);
      .user-list {
        .user-detail {
          position: relative;
          display: flex;
          padding: 5px;
          // border-radius: 10px;
          margin: 5px 0px;
          background-color: rgba(255, 255, 255, 0.5);
          .user-head {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            cursor: pointer;
          }
          .user-head:hover {
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
          }
          .user-info {
            padding-left: 5px;
            .user-name {
              margin-left: 5px;
              font-size: 14px;
              margin-left: 5px;
              .message-role {
                font-size: 12px;
                display: inline-block;
                color: white;
                border-radius: 5px;
                vertical-align: middle;
                box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
                margin-right: 5px;
                .iconfont {
                  padding: 1px 2px;
                  font-size: 12px;
                  vertical-align: middle;
                  display: inline-block;
                  cursor: pointer;
                }
              }
              .message-role-owner {
                background-color: #333;
              }
              .message-role-vp {
                background-color: #dd680a;
              }
              .message-role-admin {
                background-color: #fae121;
              }
              .message-role-vip {
                background-color: #18840c;
              }
            }
            .user-remark {
              display: block;
              margin-top: 10px;
              color: #ccc;
              font-size: 12px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-left: 5px;
              .iconfont {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  .message-list {
    flex: 1;
    height: 0;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    position: relative;
    .message-box {
      position: absolute;
      left: 0;
      right: 0;
      top: 10px;
      bottom: 40px;
      overflow: hidden;
      overflow-y: auto;
      .message-item {
        display: flex;
        flex-direction: row;
        margin: 10px;
        .message-head {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          overflow: hidden;
          cursor: pointer;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .message-content {
          flex: 1;
          text-align: left;
          .message-name {
            font-size: 16px;
            margin: 0px 15px;
            vertical-align: middle;
            .message-role {
              font-size: 12px;
              display: inline-block;
              color: white;
              border-radius: 5px;
              vertical-align: middle;
              box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
              .iconfont {
                padding: 1px 2px;
                font-size: 12px;
                vertical-align: middle;
                display: inline-block;
                cursor: pointer;
              }
            }
            .message-role-owner {
              background-color: #333;
            }
            .message-role-vp {
              background-color: #dd680a;
            }
            .message-role-admin {
              background-color: #fae121;
            }
            .message-role-vip {
              background-color: #18840c;
            }
          }
          .message-text {
            background-color: #ccc;
            display: inline-block;
            padding: 8px 16px;
            border-radius: 8px;
            margin: 10px 15px 20px 15px;
            color: #333;
            font-size: 12px;
            position: relative;
            max-width: 40%;
            word-break: break-all;
            text-align: left;
          }
        }
      }
      .message-mine {
        flex-direction: row-reverse;
        .message-content {
          text-align: right;
        }
        .message-text::after {
          content: "";
          position: absolute;
          right: -15px;
          top: -6px;
          left: calc(100%);
          width: 10px;
          height: 15px;
          border: 0 solid transparent;
          border-bottom-width: 10px;
          border-bottom-color: currentColor;
          border-radius: 0 0 20px 0;
        }
        .message-boy {
          background-color: #66cbff !important;
          color: white !important;
        }
        .message-boy::after {
          color: #66cbff !important;
        }
        .message-girl {
          background-color: #fe9898 !important;
          color: white !important;
        }
        .message-girl::after {
          color: #fe9898 !important;
        }
      }

      .system {
        text-align: center;
        padding: 5px 10%;
        color: #999;
        font-size: 12px;
        .msg {
          display: inline-block;
          padding: 2px 10px;
          border-radius: 5px;
          color: #aaa;
          background: #ddd;
          .user {
            cursor: pointer;
            color: #666;
          }
          .user:hover {
            color: #ff4500;
          }
        }
      }
    }
    .controll {
      display: flex;
      flex-direction: row;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 5px;
      background-color: #eee;
      .item {
        border: 1px solid #eee;
        display: inline-block;
        padding: 5px 10px;
        margin: 0px 2px;
        font-size: 12px;
        vertical-align: middle;
        color: #aaa;
        border-radius: 8px;
        background-color: #e5e5e5;
        text-align: center;
        width: 70px;
        cursor: pointer;
        transition: all 0.5s;
        .iconfont {
          font-size: 16px;
        }
      }
      .item:hover {
        color: #333;
        background-color: #ccc;
      }
    }
  }
  .message-form {
    height: 80px;
    background-color: #eee;
    border-top: 1px solid #ddd;
    padding: 10px 15px;
    position: relative;
    textarea {
      border: none;
      width: 100%;
      height: 70%;
      resize: none;
      outline: none;
      background-color: transparent;
    }
    .btn-comment {
      width: 90px;
      height: 30px;
      position: absolute;
      right: 10px;
      bottom: 3px;
    }
    .at-box {
      position: absolute;
      left: 10px;
      bottom: 10px;
      display: flex;
      font-size: 12px;
      background-color: #ddd;
      padding: 2px 5px;
      border-radius: 5px;
      flex-direction: row;
      align-items: center;
      .iconfont {
        font-size: 12x;
        border-radius: 5px;
        cursor: pointer;
        color: #666;
      }
      .iconfont:hover {
        color: #ff4500;
      }
      .at-content {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #666;
        margin-right: 3px;
      }
    }
  }
}
</style>